<template>
	<div class="swiper tabs-swiper">
		<ul class="tabs swiper-wrapper">
			<li v-for="item in fing" :key='item.id' class="swiper-slide">
				<router-link to="/">
<<<<<<< HEAD
					<img :src="item.imgURl" />
=======
					<img :src="require('@/'+item.imgURl)"/>
>>>>>>> d0d9ac1 (首页)
					<p>{{item.name}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	//2.引入Swiper的动态组件
	 import Swiper,{
		 Autoplay,
		 EffectCoverflow,
		 EffectCube,
		 Pagination,
	 } from 'swiper';
	 
	 //3.swier组件应用配置
	 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	 
	export default{
		name:'Tabs',
<<<<<<< HEAD
		data(){
			return{
				fing:[
					{id:1,imgURl:require('../../../assets/iconfing/1_03.png'),name:'国内游'},
					{id:2,imgURl:require('../../../assets/iconfing/2_03.png'),name:'住宿'},
					{id:3,imgURl:require('../../../assets/iconfing/3_03.png'),name:'境外游'},
					{id:4,imgURl:require('../../../assets/iconfing/4_03.png'),name:'海岛度假'},
					{id:5,imgURl:require('../../../assets/iconfing/5_03.png'),name:'境外游'},
					{id:6,imgURl:require('../../../assets/iconfing/6_03.png'),name:'境外游'},
					{id:7,imgURl:require('../../../assets/iconfing/7_03.png'),name:'境外游'},
					{id:8,imgURl:require('../../../assets/iconfing/8_03.png'),name:'境外游'},
					{id:9,imgURl:require('../../../assets/iconfing/9_03.png'),name:'境外游'},
					{id:10,imgURl:require('../../../assets/iconfing/10_03.png'),name:'境外游'},
=======
		props:['proptable'],
		data(){
			return{
				fing:[
					// {id:1,imgURl:require('../../../assets/iconfing/1_03.png'),name:'国内游'},
					// {id:2,imgURl:require('../../../assets/iconfing/2_03.png'),name:'住宿'},
					// {id:3,imgURl:require('../../../assets/iconfing/3_03.png'),name:'境外游'},
					// {id:4,imgURl:require('../../../assets/iconfing/4_03.png'),name:'海岛度假'},
					// {id:5,imgURl:require('../../../assets/iconfing/5_03.png'),name:'境外游'},
					// {id:6,imgURl:require('../../../assets/iconfing/6_03.png'),name:'境外游'},
					// {id:7,imgURl:require('../../../assets/iconfing/7_03.png'),name:'境外游'},
					// {id:8,imgURl:require('../../../assets/iconfing/8_03.png'),name:'境外游'},
					// {id:9,imgURl:require('../../../assets/iconfing/9_03.png'),name:'境外游'},
					// {id:10,imgURl:require('../../../assets/iconfing/10_03.png'),name:'境外游'},
>>>>>>> d0d9ac1 (首页)
				]
			}
		},
		// 4.设置应用swiper的位置
		setup(){
			onMounted(()=>{
				new Swiper('.tabs-swiper',{
					 slidesPerView : 5,  
				})
			})
<<<<<<< HEAD
=======
		},
		watch:{
			proptable(){
				this.fing=this.proptable
			}
>>>>>>> d0d9ac1 (首页)
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color:black;
	}
	.tabs{
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
	}
	.tabs li{
		width: 20%;
		text-align: center;
	}
	.tabs li img{
		width: 0.8rem;
		height: 0.8rem;
	}
	.tabs li p{
		padding: 0.1rem 0;
	}
</style>
